<template>
  <div class="block-layout-component" :style="componentStyle">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'BlockLayoutComponent',
  componentName: '块布局框',
  icon: 'el-icon-s-grid',
  defaultProps: {
    背景颜色: '',
    边框宽度: '0',
    边框样式: 'none',
    边框颜色: '#000000',
    圆角: '0',
    内边距: '10px'
  },
  props: {
    背景颜色: {
      type: String,
      default: ''
    },
    边框宽度: {
      type: String,
      default: '0'
    },
    边框样式: {
      type: String,
      default: 'none'
    },
    边框颜色: {
      type: String,
      default: '#000000'
    },
    圆角: {
      type: String,
      default: '0'
    },
    内边距: {
      type: String,
      default: '10px'
    }
  },
  computed: {
    componentStyle() {
      return {
        backgroundColor: this.背景颜色,
        borderWidth: this.边框宽度 + 'px',
        borderStyle: this.边框样式,
        borderColor: this.边框颜色,
        borderRadius: this.圆角 + 'px',
        padding: this.内边距,
        width: '100%',
        height: '100%',
        boxSizing: 'border-box'
      };
    }
  }
};
</script>

<style scoped>
.block-layout-component {
  display: block;
  position: relative;
}
</style>